<template>
	<view class="page-container">
		<!-- 分类标签 -->
		<scroll-view class="tabs" scroll-x>
			<view 
				v-for="(tab, index) in tabs" 
				:key="index"
				class="tab-item"
				:class="{ active: activeTab === index }"
				@click="changeTab(index)"
			>
				{{ tab.name }}
			</view>
		</scroll-view>

		<!-- 图片展示区域 -->
		<view class="gallery">
			<view 
				v-for="(item, index) in showList" 
				:key="index" 
				class="gallery-item"
				@touchstart="startDrag(index, $event)"
				@touchmove="handleDrag"
				@touchend="endDrag"
				:style="{
					transform: `translate(${dragPos.x}px, ${dragPos.y}px)`,
					zIndex: activeIndex === index ? 999 : 1
				}"
			>
				<image 
					class="gallery-image" 
					:src="$img(item.image)" 
					mode="widthFix"
					@click="previewImage(index)"
				/>
				<text class="gallery-caption">{{ item.caption }}</text>
			</view>
		</view>

		<!-- 加载提示 -->
		<view class="loading" v-if="loading">
			<text>加载中...</text>
		</view>
		<view class="no-more" v-if="noMore">
			<text>没有更多了</text>
		</view>

		<!-- 自定义tabBar -->
		<custom-tab-bar :current="0" />
	</view>
</template>

<script>
import CustomTabBar from '@/components/custom-tab-bar.vue'

export default {
	components: {
		CustomTabBar
	},
	data() {
		return {
			activeTab: 0,
			galleryList: [],
			page: 1,
			pageSize: 4,
			loading: false,
			noMore: false,
			dragPos: { x: 0, y: 0 },
			startPos: { x: 0, y: 0 },
			activeIndex: -1,
			isDragging: false
		}
	},
	computed: {
		showList() {
			return this.galleryList
		}
	},
	onLoad() {
		this.loadData()
	},
	onReachBottom() {
		if (!this.noMore) {
			this.loadData()
		}
	},
	methods: {
		// 切换分类
		changeTab(index) {
			this.activeTab = index
			this.page = 1
			this.galleryList = []
			this.noMore = false
			this.loadData()
		},

		// 图片预览
		previewImage(index) {
			if (this.isDragging) return
			uni.previewImage({
				current: this.showList[index].image,
				urls: this.showList.map(item => item.image)
			})
		},

		// 加载数据
		async loadData() {
			if (this.loading || this.noMore) return
			
			this.loading = true
			const newData = await this.getMockData()
			this.galleryList = [...this.galleryList, ...newData]
			this.loading = false
			this.noMore = this.galleryList.length >= 30
		},

		// 修改后的模拟数据
		async getMockData() {
			return Array.from({ length: this.pageSize }, (_, i) => ({
				image: `images/${i+1}.jpg`, // 仅保留文件名
				caption: `图片 ${i+1}`,
				type: 'general'
			}))
		},

		startDrag(index, e) {
			this.activeIndex = index
			this.isDragging = false
			this.startPos = {
				x: e.touches[0].clientX,
				y: e.touches[0].clientY
			}
		},
		
		handleDrag(e) {
			if (this.activeIndex === -1) return
			
			const currentX = e.touches[0].clientX
			const currentY = e.touches[0].clientY
			
			this.dragPos = {
				x: currentX - this.startPos.x,
				y: currentY - this.startPos.y
			}
			
			this.isDragging = Math.abs(this.dragPos.x) > 5 || Math.abs(this.dragPos.y) > 5
		},
		
		endDrag() {
			if (this.isDragging) {
				// 交换位置逻辑
				const items = [...this.galleryList]
				const draggedItem = items.splice(this.activeIndex, 1)[0]
				const newIndex = this.findNewPosition()
				items.splice(newIndex, 0, draggedItem)
				this.galleryList = items
			}
			
			this.resetDrag()
		},
		
		findNewPosition() {
			// 根据最终位置计算新索引
			return Math.floor(Math.random() * this.galleryList.length)
		},
		
		resetDrag() {
			this.dragPos = { x: 0, y: 0 }
			this.activeIndex = -1
			this.isDragging = false
		}
	}
}
</script>

<style lang="scss">
/* 通用布局系统 */
.page-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	min-height: 100rpx;
	padding: 40rpx 30rpx;
	padding-bottom: 170rpx;
	background: #f8f8f8;
	box-sizing: border-box;
}

/* 头部容器 */
.header {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 700rpx;
	margin-bottom: 80rpx;
}

.logo {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 40rpx;
}

.title {
	font-size: 36rpx;
	color: #333;
	text-align: center;
	line-height: 1.5;
}

/* 响应式适配 */
@media (max-width: 375px) {
	.page-container {
		padding: 30rpx 20rpx;
	}
	
	.header {
		margin-bottom: 60rpx;
		
		.logo {
			width: 160rpx;
			height: 160rpx;
			margin-bottom: 30rpx;
		}
		
		.title {
			font-size: 32rpx;
		}
	}
}

@media (min-width: 428px) { /* iPhone 15 Pro Max */
	.page-container { padding: 3rpx 6%; }
}

@media (orientation: landscape) { /* 横屏模式 */
	.page-container { padding: 4rpx 8%; }
	.header .logo { width: min(15rpx, 150rpx); }
}

/* 恢复原生网格布局 */
.gallery {
	display: grid;
	grid-auto-flow: dense;
	grid-auto-rows: auto;
	grid-template-columns: repeat(2, 1fr);
	gap: 20rpx;
	text-align: center;
	width: 100%;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0 20rpx;
	transition: grid-template-columns 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.gallery-item {
	background: #fff;
	border-radius: 16rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);
	transition: all 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
	will-change: transform, opacity;
	
	&:active {
		transform: scale(0.98);
	}
	
	.gallery-image {
		width: 100%;
		height: auto;
		object-fit: cover;
		cursor: pointer;
	}
}

.gallery-caption {
	padding: 20rpx;
	font-size: 26rpx;
	color: #333;
	line-height: 1.4;
}

/* 分类标签 */
.tabs {
	width: 100%;
	white-space: nowrap;
	padding: 20rpx 30rpx;
	background: #fff;
	
	.tab-item {
		display: inline-block;
		padding: 15rpx 40rpx;
		margin-right: 30rpx;
		border-radius: 40rpx;
		background: #f5f5f5;
		color: #666;
		font-size: 28rpx;
		
		&.active {
			background: #007AFF;
			color: #fff;
		}
	}
}

/* 加载提示 */
.loading, .no-more {
	text-align: center;
	padding: 40rpx;
	color: #999;
	font-size: 28rpx;
}

/* 新增瀑布流样式 */
.img-info {
	padding: 20rpx;
	background: rgba(255,255,255,0.9);
	border-radius: 0 0 8rpx 8rpx;
	
	.caption {
		font-size: 26rpx;
		color: #333;
		line-height: 1.4;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;
	}
}

/* 适配移动端 */
@media (max-width: 375px) {
	.img-info {
		padding: 15rpx;
		
		.caption {
			font-size: 24rpx;
		}
	}
}

.gallery-item {
	transition: all 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
	will-change: transform, opacity;
	
	&.dragging {
		opacity: 0.7;
		box-shadow: 0 10rpx 30rpx rgba(0,0,0,0.2);
		transition: none; /* 拖动时禁用过渡 */
	}
}

@media (max-width: 375px) {
	.gallery-item {
		touch-action: none; // 防止浏览器默认行为
		backface-visibility: hidden;
		perspective: 1000rpx;
	}
}

/* 添加入场动画 */
.gallery-item-enter-active {
	transition: all 0.6s cubic-bezier(0.18, 0.89, 0.32, 1.28);
	opacity: 0;
	transform: translateY(50rpx);
}

.gallery-item-enter-to {
	opacity: 1;
	transform: translateY(0);
}
</style>
